<template>
  <div class="container transac-monitor-submit pb">
    <p class="bread">
      <a href="#/">首页</a> >
      <a href="#/personalcenter/law" class="font-s-18">订单管理-法律服务 ></a>
      <a href="javascript:void(0);" class="font-s-16">申请付款</a>
    </p>
    <div class="content box-border fix bg-c-fff">
      <h3>选择付款方式
      <span class="flo-right">应付金额：<i>{{this.$route.query.charge | moneyFilter}}</i></span></h3>
      <div class="box">
        <p>订单号：{{id}}</p>
        <ul class="auto tc">
          <li class="dib rel" @click="paymentShow(1)">
            <input type="radio" name="payment-method" id="wx">
            <label for="wx" class="wx cup"></label>
            <span class="db abs">
              <i class="db" v-show="isChoice===1"></i>
            </span>
          </li>
          <li class="dib rel" @click="paymentShow(2)">
            <input type="radio" name="payment-method" id="ali">
            <label for="ali" class="ali cup"></label>
            <span class="db abs">
              <i class="db"v-show="isChoice===2"></i>
            </span>
          </li>
          <li class="dib rel" @click="paymentShow(3)">
            <input type="radio" name="payment-method" id="yl">
            <label for="yl" class="yl cup"></label>
            <span class="db abs">
              <i class="db" v-show="isChoice===3"></i>
            </span>
          </li>
        </ul>
      </div>
      <div class="time-button fix">
        <div class="flo-right">
          <span></span>
          <button class="blue-button db" @click="onSubmit">立即付款</button>
        </div>
      </div>
    </div>
    <vodal :show="QRCodeShow" animation="zoom" :width="380" :height="429" :closeButton='false'>
      <div class="vodal-main">
        <p class="tc">请用{{payType}}扫描二维码支付</p>
        <p class="money tc">应付金额：<span>{{this.$route.query.charge | moneyFilter}}</span></p>
        <div id="qrcode"></div>
        <p class="tc time">剩余时间:{{time}}</p>
        <div class="tc">
          <button type="button" class="blue-button dib" v-bind:class="{acticve:noClick}" @click="payFinsh">支付完成</button>
          <button type="button" class="white-button dib" @click="payEnding">取消支付</button>
        </div>
      </div>
    </vodal>
    <vodal :show="waitShow" animation="zoom" :width="380" :height="76" :closeButton='false'>
      <div class="vodal-main">
        <p class="tc">请等待生成二维码...</p>
      </div>
    </vodal>
  </div>
</template>
<script type="text/javascript">
import QRCode from '../lib/qrcode.js'
export default {
  data() {
    return {
      id: '',
      isChoice: 1,
      timeData: 900,
      charge: '',
      hour: '',
      minute: '',
      second: '',
      time: '',
      noClick: false,
      QRCodeShow: false,
      trxid: '',
      orderPayId: '',
      qrcode: null,
      waitShow: false
    }
  },
  mounted() {
    this.qrcode = new QRCode(document.getElementById('qrcode'), {
      width: 220,
      height: 220
    })
  },
  computed: {
    payType() {
      if (this.isChoice === 1) {
        return '微信'
      } else if (this.isChoice === 2) {
        return '支付宝'
      }
    }
  },
  methods: {
    paymentShow(index) {
      this.isChoice = index
      return
    },
    dataTime() {
      var timeFun = setInterval(() => {
        this.timeData--
          var minute = parseInt(this.timeData / 60)
        var second = parseInt(this.timeData % 60)
        this.time = minute + ' 分 ' + second + ' 秒'
        if (this.timeData < 1) {
          clearInterval(timeFun)
          this.time = '0 分 0 秒'
          this.noClick = true
        }
      }, 1000)
    },
    onSubmit() {
      this.waitShow = true
      this.$http.post('/orderPay/unified/toPay', {
        productId: this.$route.query.id,
        orderPrice: this.$route.query.charge,
        type: 2,
        productInfo: '法律服务订单',
        payment: this.isChoice,
        bill: 0
      }).then(data => {
        if (data.data.httpCode === 200) {
          this.dataTime()
          this.qrcode.clear()
          this.qrcode.makeCode(data.data.data.qrUrl)
          this.trxid = data.data.data.trxid
          this.orderPayId = data.data.data.id
          this.waitShow = false
          this.QRCodeShow = true
        } else {
          this.$toasted.show(data.data.msg)
        }
      }).catch(err => {
        console.log(err)
        this.$toasted.show('网络出错')
      })
    },
    payFinsh() {
      if (this.timeData <= 0) {
        this.$toasted.show('订单已过时，请重新开始')
        this.$router.push('/personalcenter/law')
      }
      this.$http.post('/orderPay/callback', {
        id: this.orderPayId,
        trxid: this.trxid
      }).then(data => {
        if (data.data.httpCode === 200) {
          console.log(data.data.data)
          if (data.data.data === 3) {
            this.$toasted.show('支付成功')
            this.$router.push('/personalcenter/law')
          }
        } else {
          if (data.data.msg === '2008') {
            this.$toasted.show('交易处理中')
          }
          if (data.data.msg === '0000') {
            this.$toasted.show('交易成功')
            this.$router.push('/personalcenter/law')
          }
          if (data.data.msg === '3045' || data.data.msg === '3088') {
            this.$toasted.show('交易处理中')
          }
          if (data.data.msg === '3999') {
            this.$toasted.show('交易失败')
          }
          if (data.data.msg === '3008') {
            this.$toasted.show('余额不足')
          }
          if (data.data.msg === '3050') {
            this.$toasted.show('交易已撤销')
          }
        }
      }).catch(err => {
        console.log(err)
        this.$toasted.show('网络出错')
      })
    },
    payEnding() {
      this.$router.push('/personalcenter/law')
      this.$toasted.show('订单已取消!')
    }
  },
  filters: {
    moneyFilter(money) {
      return '￥' + (money / 100).toFixed(2) + '元'
    }
  }
}

</script>
<style type="text/css" scoped>
.box-border {
  border: 1px solid #ddd;
}

.pb {
  padding-bottom: 143px;
}

.content h3 {
  color: #a5a5a5;
  line-height: 40px;
  font-size: 14px;
}

.content h3,
.content .box {
  padding: 0 40px;
  color: #a5a5a5;
  border-bottom: 1px solid #dddddd;
}

.content h3 span i {
  color: #ec1818;
  font-size: 18px;
}

.content .box p {
  line-height: 37px;
}

.content .box li {
  margin: 0 15px 35px 15px;
}

.content .box li input {
  opacity: 0;
  filter: alpha(opacity=0);
}

.content .box li label {
  box-shadow: -1px -1px 18px #f0f2fa;
  width: 300px;
  height: 120px;
  display: block;
}

.yl {
  background: url(../assets/cxk.jpg) center no-repeat;
}

.wx {
  background: url(../assets/wx.jpg) center no-repeat;
}

.ali {
  background: url(../assets/ali.jpg) center no-repeat;
}

.content .box li span,
.content .box li i {
  border-radius: 100%;
}

.content .box li span {
  left: 15px;
  top: 68px;
  border: 1px solid #989898;
  width: 20px;
  height: 20px;
}

.content .box li i {
  width: 14px;
  height: 14px;
  background-color: #282828;
  margin-top: 2px;
  margin-left: 2px;
}

.time-button {
  padding: 13px 40px 13px 0;
  color: #a5a5a5;
}

.time-button button {
  width: 160px;
  height: 50px;
  line-height: 50px;
  font-size: 18px;
  margin-left: 20px;
}

button.acticve {
  background-color: #ddd;
  border-color: #ddd;
}

.vodal-main {
  padding: 25px;
}

.vodal-main p.tc {
  font-size: 23px;
}

.vodal-main p.money {
  line-height: 42px;
  margin-top: 10px;
}

.vodal-main p.money span {
  font-size: 20px;
  font-weight: bold;
  color: #ff0000;
}

.vodal-main p.time {
  font-size: 15px;
  line-height: 35px;
}

#qrcode {
  margin: 0 auto;
  display: block;
  width: 220px;
  height: 220px;
}

.vodal-main button {
  width: 80px;
  height: 35px;
  line-height: 35px;
  margin: 7px 27px;
}

</style>
